<template>
  <div>
    <!--图书详情页-->

    <!--头部导航-->
    <van-nav-bar
      :title="book.title"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />

    <div style="padding:20px">
      <!--展示图片懒加载用法-->
      <img v-lazy="book.picture">
      <br>
      {{book.desc}}
    </div>

    <!--底部导航-->
    <van-goods-action>

      <van-goods-action-button
        type="danger"
        text="加入书架"
        @click="addToMyshelf"
      />
    </van-goods-action>

  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      id: this.$route.params.id
    };
  },
  computed: {
    ...mapState(["book"])
  },
  methods: {
    ...mapActions(["GET_BOOK"]),
    ...mapMutations(["addShelf"]),

    // 返回上一页
    goBack() {
      this.$router.push("/main/home");
    },

    // 添加到我的书架
    addToMyshelf() {
      this.addShelf(this.book);
      this.$router.push("/main/my");
    }
  },

  created() {
    this.GET_BOOK(this.id);
  }
};
</script>
